<!--
自己制作三角形
    - 盒子宽、高设为0
    - 行高、字号也设为0（这两个解决某些浏览器的兼容性问题）
    - 用四周边框设置
        粗细：决定三角形高度，不同粗细会得到各种奇奇怪怪的图案。。
        颜色：透明或有色彩
    - 聊天泡泡的那个小三角
    - 漏斗形状
    - 利用圆角边框还可以制作扇形、砖石图形

拓展：自己试着玩玩，会得到很多意向不到的效果图，例如宽高不设置为0会怎样...
-->
<style>
    div {
        width: 0;
        height: 0;
        line-height: 0;
        font-size: 0;
    }
    .box {
        border-top: 10px solid red;
        border-right: 10px solid transparent;
        border-bottom: 15px solid blue;
        border-left: 15px solid transparent;

        /* border-radius: 5px 5px 0 0; */
        border-radius: 20%;
    }
    .test {
        border: 10px solid transparent;
        border-right-color: purple;
    }
</style>

<div class="box"></div>
<div class="test"></div>